import React, {useEffect, useRef, useState} from 'react';
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

import './md.scss'
const MarkdownSection = (props) => {
  const {mdFile}=props
  const [markdown,setMarkDown]=useState({
    markdown:''
  });
  useEffect(()=>{

    fetch(mdFile)
      .then(response => {
        return response.text()
      })
      .then(text => {
        setMarkDown({
          markdown: text
        })
      })
  },[])
  return (
    <div className={'md-content'}>

      <ReactMarkdown children={markdown.markdown} components={{
        td: ({node, ...props}) => <td className={'md-td'} {...props} />,
        table: ({node, ...props}) => <table className={'md-table'}  {...props} />,
        th: ({node, ...props}) => <th className={'md-th'}  {...props} />,
        tr:({node, ...props}) => <tr className={'md-tr'}  {...props} />

      }} remarkPlugins={[[remarkGfm,{singleTilde: false}]]}/>

    </div>
  );
};

export default MarkdownSection;